<template>
	<view class="bgInfo">
		<no-more v-if="show && page == 1"></no-more>
		<view class="main">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" :enable-back-to-top="true" :lower-threshold="30"
				@scrolltolower="loadMore" @scrolltoupper="refresh" style="height: 100vh;">
				<uni-swipe-action>
					<view class="slot-button" v-for="(item,index) in data" :key='index' @click="viewDetail(item.id,item.orderStatusText)">
						<view class="order-title">
							<view class="order-number">{{item.orderNumber}}</view>
							<view class="order-status" :class="item.orderStatus == 0 ? 'active' : ''">{{item.orderStatusText}}</view>
						</view>
						<view class="order-content">
							<view class="content-name">
								{{item.expertName}}
								<span>
									<image :src="getImgUrl('/img/wshing/tab.png')" class="right_img"></image>
									{{item.consultationUnitPrice}}/分钟
								</span>
							</view>
							<view class="content-question">
								{{item.consultationQuestions}}
							</view>
							<view class="content-amount">需支付：
								<image :src="getImgUrl('/img/wshing/tab.png')" class="right_img"></image>
								{{item.heSaidPrice}}
							</view>
						</view>
						<view class="order-footter">
							订单时间{{item.orderTime}}
						</view>
					</view>
				</uni-swipe-action>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	import {
		myOrderList
	} from '@/utils/OnetoOneaApi.js'
	import {
		baseURL
	} from '../../../utils/baseUrl.js'
	import noMore from '../../../components/no-data/no-more.vue';
	export default {
		components: {
			noMore
		},
		data() {
			return {
				show: false,
				baseUrl: '',
				options2: [{
					text: '删除',
					style: {
						color: '#000000',
						backgroundColor: '#F56C6C',
					}
				}],
				data: [],
				page: 1,
				pageSize: 10,
				showLoadMore: true,
				loading: false,
				loadMoreText: '加载更多',
			}
		},
		onShow() {
			this.baseUrl = baseURL;
			this.Datalist()
		},
		onHide() {
			this.show = false
		},
		methods: {
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			viewDetail(id,status){
				console.log("status=============>",status)
				const myStatus = status == '已支付' ? '1' : '2'
				uni.navigateTo({
					url:`../../../subPackagesB/pages/MyOrder/orderDetail?Id=${id}&status=${myStatus}`
				})
			},
			//我的档案列表
			async Datalist() {
				let params = {
					pageNo: this.page,
					pageSize: this.pageSize
				}
				const res = await myOrderList(params)
				if(!res.result.records.length){
					this.show = true
				}
				this.data = res.result.records;
				for	(var i = 0; i< this.data.length; i++) {
					var item = this.data[i];
					var statusStr = '待支付';
					switch(item.orderStatus){
						case 0:
							statusStr = '待支付';
							break;
						case 1:
							statusStr = '已支付';
							break;
						case 2:
							statusStr = '已关闭';
							break;
					}
					item.orderStatusText = statusStr;
				}
			},
			// 下拉刷新
			async loadMore() {
				this.page++
				let params = {
					pageNo: this.page,
					pageSize: this.pageSize
				}
				const res = await myOrderList(params)
				this.data = [...this.data, ...res.result.records]
			}
		}
	};
</script>
<style lang='less' scoped>
	.bgInfo {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F7;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.main {
			padding: 25rpx 25rpx 25rpx 25rpx;
			.slot-button {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				padding: 20rpx;
				margin-top: 20rpx;
				.order-title{
					display: flex;
					font-size: 24rpx;
					color: #666;
					padding-bottom: 10rpx;
					border-bottom: 1rpx solid rgba(0, 46, 37, 0.08);
					
					.order-number{
						flex: auto;
					}
					.order-status{
						width: 100rpx;
						text-align: center;
						border-radius: 10rpx;
						line-height: 45rpx;
					}
				}
				
				.order-content{
					font-size: 28rpx;
					padding: 10rpx 0;
					
					.content-name{
						font-size: 36rpx;
						span {
							font-size: 24rpx;
							color: #666;
							padding-left: 5rpx;
						}
					}
					.content-question{
						font-size: 30rpx;
						padding: 15rpx;
					}
					
					.content-amount{
						text-align: right;
						color: #666;
						font-size: 24rpx;
						padding-right: 20rpx;
					}
				}
				
				.order-footter{
					font-size: 24rpx;
					color: #666;
					padding-top: 10rpx;
					border-top: 1rpx solid rgba(0, 46, 37, 0.08);
				}
				
				
				.right_img {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
				
				.active{
					color: #fff;
					background-color: #FF7F0F;
				}
			}
		}
	}
</style>